<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layuiAdmin 控制台主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/plug/swiper/css/swiper.min.css">
    <script src="/plug/swiper/js/swiper.min.js"></script>
    <script src="/plug/echarts/echarts.min.js"></script>
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        .blue-color {
            color: #00a2d4;
            font-size: 20px;
        }

        .red-color {
            color: #f43838;
            font-size: 20px;
        }

        ul {}

        ul li {
            display: flex;
            flex-wrap: wrap;

        }

        ul li>div {
            width: 227px;
            height: 145px;
            background: #F6F6F6;
            box-shadow: 0px 0px 13px 0px rgba(0, 93, 173, 0.13);
            border-radius: 7px;
            padding: 27px 24px;
            box-sizing: border-box;
            margin-bottom: 25px;
            margin: 10px;
        }

        ul li>div a {
            font-size: 17px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }

        ul li>div .blue-color,
        .red-color {
            margin-top: 26px;
            font-size: 38px;
        }

        .layadmin-dataview {
            height: unset !important;
        }

        .layui-card {
            background-color: transparent;
            box-shadow: unset;
            display: flex;
            justify-content: space-between;
        }

        .layui-card-body {
            display: inline-block;
            vertical-align: top;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }
        .layui-card-body.right{
            width:  40%;
            background-color: white;
            overflow: hidden;
        }
        .layui-card-body.left {
            width: 55%;
            height: 600px;
            background-color: white;
            border-radius: 7px;
        }

        .left .swiper-slide {
            height: 450px;
            overflow: hidden;
        }

        .layui-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dot span {
            display: inline-block;
            width: 13px;
            height: 13px;
            background: #D2D2D2;
            border-radius: 50%;
            transition: all .15s linear;
            margin-left: 10px;
        }

        .dot span.active {

            background: #00A0E9;
        }
    </style>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8" style="width:100%;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <!--<div class="layui-card-body left">-->
                            <!--    <div class="layui-card-header">数据概览-->
                            <!--        <div class="dot">-->
                            <!--            <span class="active"></span>-->
                            <!--            <span class=""></span>-->
                            <!--            <span class=""></span>-->
                            <!--            <span class=""></span>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--    <div class="swiper-container">-->
                            <!--        <div class="swiper-wrapper">-->
                            <!--            <div class="swiper-slide" id="swiper-slide1"></div>-->
                            <!--            <div class="swiper-slide" id="swiper-slide2"></div>-->
                            <!--            <div class="swiper-slide" id="swiper-slide3"></div>-->
                            <!--            <div class="swiper-slide" id="swiper-slide4"></div>-->
                            <!--        </div>-->
                            <!--    </div>-->
                              
                            <!--</div>-->
                            <!--<div class="layui-card-body right">-->
                            <!--    <div class="layui-card-header">待办事项-->
                            <!--        <div class="dot">-->
                            <!--            <span class="active"></span>-->
                            <!--            <span class=""></span>-->
                            <!--            <span class=""></span>-->
                            <!--            <span class=""></span>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--    <div class="swiper-container-right">-->
                            <!--        <div class="swiper-wrapper">-->
                            <!--            <div class="swiper-slide">-->
                            <!--                <ul>-->
                            <!--                    <li style="">-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/user_index/index">-->
                            <!--                                <div>用户总数</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.user.count}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/user_index/index?type=1">-->
                            <!--                                <div>养殖户</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.user.yz}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/user_index/index?type=2">-->
                            <!--                                <div>猪贩子</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.user.zf}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/user_index/index?type=3">-->
                            <!--                                <div>屠宰场</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.user.tz}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/user_index_qk/index">-->
                            <!--                                <div>欠款用户</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.user.qk}</div>-->
                            <!--                        </div>-->
                            <!--                    </li>-->
                            <!--                </ul>-->
                            <!--            </div>-->
                            <!--            <div class="swiper-slide">-->
                            <!--                <ul>-->
                            <!--                    <li style="">-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/product/index">-->
                            <!--                                <div>已上架商品总数</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.product.sj}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/product/index">-->
                            <!--                                <div>商品已售出</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.product.xl}</div>-->
                            <!--                        </div>-->
                            <!--                    </li>-->
                            <!--                </ul>-->
                            <!--            </div>-->
                            <!--            <div class="swiper-slide">-->
                            <!--                <ul>-->
                            <!--                    <li style="">-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/order/index">-->
                            <!--                                <div>商品订单总数</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.order.count}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/order/index">-->
                            <!--                                <div>已完成订单总数</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="blue-color">{$data_table.order.over}</div>-->
                            <!--                        </div>-->
                            <!--                    </li>-->
                            <!--                </ul>-->
                            <!--            </div>-->
                            <!--            <div class="swiper-slide">-->
                            <!--                <ul>-->
                            <!--                    <li style="">-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/order/index?status=2">-->
                            <!--                                <div>待发货订单</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="red-color">{$data_table.order.df}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/order/index?status=4">-->
                            <!--                                <div>未结算订单</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="red-color">{$data_table.order.js}</div>-->
                            <!--                        </div>-->
                            <!--                        <div style="">-->
                            <!--                            <a lay-href="/admin/post/index?status=3">-->
                            <!--                                <div>待处理发帖审批</div>-->
                            <!--                            </a>-->
                            <!--                            <div class="red-color">{$data_table.post.sp}</div>-->
                            <!--                        </div>-->
                            <!--                    </li>-->
                            <!--                </ul>-->
                            <!--            </div>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
                              <!-- <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"> -->
                                <!-- <div>
                                        <ul>
                                            <li style="">
                                                <div style="">
                                                    <a lay-href="/admin/user_index/index">
                                                        <div>用户总数</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.user.count}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/user_index/index?type=1">
                                                        <div>养殖户</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.user.yz}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/user_index/index?type=2">
                                                        <div>猪贩子</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.user.zf}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/user_index/index?type=3">
                                                        <div>屠宰场</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.user.tz}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/user_index_qk/index">
                                                        <div>欠款用户</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.user.qk}</div>
                                                </div>
                                            </li>
                                            <li style="">
                                                <div style="">
                                                    <a lay-href="/admin/product/index">
                                                        <div>已上架商品总数</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.product.sj}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/product/index">
                                                        <div>商品已售出</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.product.xl}</div>
                                                </div>
                                            </li>
                                            <li style="">
                                                <div style="">
                                                    <a lay-href="/admin/order/index">
                                                        <div>商品订单总数</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.order.count}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/order/index">
                                                        <div>已完成订单总数</div>
                                                    </a>
                                                    <div class="blue-color">{$data_table.order.over}</div>
                                                </div>
                                            </li>
                                            <li style="">
                                                <div style="">
                                                    <a lay-href="/admin/order/index?status=2">
                                                        <div>待发货订单</div>
                                                    </a>
                                                    <div class="red-color">{$data_table.order.df}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/order/index?status=4">
                                                        <div>未结算订单</div>
                                                    </a>
                                                    <div class="red-color">{$data_table.order.js}</div>
                                                </div>
                                                <div style="">
                                                    <a lay-href="/admin/post/index?status=3">
                                                        <div>待处理发帖审批</div>
                                                    </a>
                                                    <div class="red-color">{$data_table.post.sp}</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div> -->
                                <!-- </div> -->

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery-2.1.1.min.js">

    </script>
    <script>
    let layuiAdmin ={"theme":{"color":{"main":"#20222A","selected":"#009688","alias":"default","index":0}}}
        localStorage.setItem('layuiAdmin',layuiAdmin)
        // 左边
        // 轮播-左边
        var myLeftSwiper = new Swiper('.swiper-container', {
            loop: false, // 循环模式选项
            on: {
                init: function (params) {
                },
                slideChangeTransitionStart() {
                    $('.left .dot span').eq(this.realIndex).addClass('active')
                    $('.left .dot span').eq(this.realIndex).siblings('span').removeClass("active")
                }
            }
        })
        // 轮播-右边
        var myRightSwiperRight = new Swiper('.swiper-container-right', {
            loop: false, // 循环模式选项
            on: {
                init: function (params) {
                },
                slideChangeTransitionStart() {
                    $('.right .dot span').eq(this.realIndex).addClass('active')
                    $('.right .dot span').eq(this.realIndex).siblings('span').removeClass("active")
                }
            }
        })
        function initEcharts(x, data, colors,title) {
            return {
                title:{
                    text:title,
                    textAlign:"left",
                    
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: x,
                        axisLine: {
                            lineStyle: {
                                color: '#0B7FB4'
                            }
                        },
                        nameTextStyle:{
                        },
                        axisLabel: {
                            margin: 20,
                            align:"left"
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#0B7FB4'
                            }
                        },
                        axisLabel: {
                            margin: 20
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: colors // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#3E91D4' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: data,
                        lineStyle: {
                            color: colors
                        },
                        itemStyle: {
                            borderWidth: 0
                        }
                    }
                ]
            };
        }
        var [dom1, dom2, dom3, dom4] = [document.getElementById('swiper-slide1'), document.getElementById('swiper-slide2'), document.getElementById('swiper-slide3'), document.getElementById('swiper-slide4')]
        // 左边第一个swiper
        var myChart1 = echarts.init(dom1);
        var left_one_x = ['用户总数', '养殖户', '猪贩子', '屠宰场', '欠款用户']
        var left_one_data = [{$data_table.user.count}, {$data_table.user.yz}, {$data_table.user.zf}, {$data_table.user.tz}, {$data_table.user.qk}]
        myChart1.setOption(initEcharts(left_one_x, left_one_data, '#15DEF6','用户数据'))
        // 左边第二个swiper
        var myChart2 = echarts.init(dom2);
        var left_two_x = ['已上架商品总数', '商品已售出']
        var left_two_data = [{$data_table.product.sj}, {$data_table.product.xl}]
        myChart2.setOption(initEcharts(left_two_x, left_two_data, '#FC644D','商品数据'))
        // 左边第三个swiper
        var myChart3 = echarts.init(dom3);
        var left_three_x = ['商品订单总数', '已完成订单总数']
        var left_three_data = [{$data_table.order.count}, {$data_table.order.over}]
        myChart3.setOption(initEcharts(left_three_x, left_three_data, '#8826F5','订单数据'))
        // 左边第四个swiper
        var myChart4 = echarts.init(dom4);
        var left_four_x = ['待发货订单', '未结算订单', '待处理发帖审批']
        var left_four_data = [{$data_table.order.df}, {$data_table.order.js}, {$data_table.post.sp}]
        myChart4.setOption(initEcharts(left_four_x, left_four_data, '#15C8E3','待处理事项'))
        /*=========================*/
        layui.config({
            base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'admin', 'carousel', 'echarts'], function () {


            //区块轮播切换
            var $ = layui.$
                , admin = layui.admin
                , carousel = layui.carousel
                , element = layui.element
                , echarts = layui.echarts
                , device = layui.device();
            //轮播切换
            $('.layadmin-carousel').each(function () {
                var othis = $(this);
                carousel.render({
                    elem: this
                    , width: '100%'
                    , arrow: 'none'
                    , interval: othis.data('interval')
                    , autoplay: othis.data('autoplay') === true
                    , trigger: (device.ios || device.android) ? 'click' : 'hover'
                    , anim: othis.data('anim')
                });
            });

            element.render('progress');
            var echartsApp = [];
            var options;
            $.ajax({
                url: "{:url('path')}",
                success: function (res) {
                    options = res.data;
                    var elemDataView = $('#LAY-index-dataview').children('div');
                    var renderDataView = function (index) {
                        echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                        echartsApp[index].setOption(options[index]);
                        window.onresize = echartsApp[index].resize;
                        admin.resize(function () {
                            echartsApp[index].resize();
                        });
                    };


                    //没找到DOM，终止执行
                    if (!elemDataView[0]) return;


                    renderDataView(0);

                    //监听数据概览轮播
                    var carouselIndex = 0;
                    carousel.on('change(LAY-index-dataview)', function (obj) {
                        renderDataView(carouselIndex = obj.index);
                    });

                    //监听侧边伸缩
                    layui.admin.on('side', function () {
                        setTimeout(function () {
                            renderDataView(carouselIndex);
                        }, 300);
                    });

                    //监听路由
                    layui.admin.on('hash(tab)', function () {
                        layui.router().path.join('') || renderDataView(carouselIndex);
                    });
                }
            })
            if (window.screen.width < 990) {
                $(".layui-card-body").find(".layadmin-dataview").css('cssText', 'height:100%!important');
            }
        });

        //最新订单
        layui.use('table', function () {
            var $ = layui.$
                , table = layui.table;

            //今日热搜
            table.render({
                elem: '#LAY-index-topSearch'
                , url: layui.setter.base + 'json/console/top-search.js' //模拟接口
                , page: true
                , cols: [[
                    { type: 'numbers', fixed: 'left' }
                    , {
                        field: 'keywords',
                        title: '关键词',
                        minWidth: 300,
                        templet: '<div><a href="https://www.baidu.com/s?wd={{ d.keywords }}" target="_blank" class="layui-table-link">{{ d.keywords }}</div>'
                    }
                    , { field: 'frequency', title: '搜索次数', minWidth: 120, sort: true }
                    , { field: 'userNums', title: '用户数', sort: true }
                ]]
                , skin: 'line'
            });

            //今日热贴
            table.render({
                elem: '#LAY-index-topCard'
                , url: layui.setter.base + 'json/console/top-card.js' //模拟接口
                , page: true
                , cellMinWidth: 120
                , cols: [[
                    { type: 'numbers', fixed: 'left' }
                    , {
                        field: 'title',
                        title: '标题',
                        minWidth: 300,
                        templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'
                    }
                    , { field: 'username', title: '发帖者' }
                    , { field: 'channel', title: '类别' }
                    , { field: 'crt', title: '点击率', sort: true }
                ]]
                , skin: 'line'
            });
        });
            
    </script>
</body>

</html>